<%@ page import="org.springframework.web.context.request.SessionScope" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%request.setAttribute("ctx", request.getContextPath());%>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.9.14/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/layui_ext/xmSelect/xm-select.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/crypto-js.js"></script>
    <title>登陆页面</title>
</head>
<body>

<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" value="" lay-verify="required|username" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required|password" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>

    </div>
</form>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        // 提交事件
        form.on('submit(demo-login)', function(data){
            var field = data.field; // 获取表单字段值
            $.post("/login/loginSave.do",field,function (res){
                if(res.code==0){
                    layer.msg(res.code,{time:2000})
                    location.href="/main.do"
                }else{
                    layer.msg(res.msg,{time:2000})
                }
            })
            return false;//阻止默认form跳转
        });
        form.verify({
            // 要求对账号、密码进行格式验证，包括非空验证，用户名长度不能小于8位，密码长度不小于6位，且密码必须包含字母和数字
            username: function(value, elem) {
                // 自定义规则
                if (value.length < 6) {
                    return '用户名不能小于8位(前端)';
                }
            },
            // 密码长度不小于6位，且密码必须包含字母和数字
            password: function(value, elem) {
                if (!value) return; // 若值未填写，不进行后续规则验证
                // 自定义规则
                var pattern = /^(?=.*\d)(?=.*[a-zA-Z]).{6,}$/;
                if (!pattern.test(value)) {
                    return '密码长度不小于6位，且密码必须包含字母和数字(来自前端)';
                }
            },
        });
    });
</script>

</body>
</html>